<ModalDialog
  {id}
  {label}
  {title}
  shrinkWidthToFit={true}
  background="var(--main-bg)"
>
  <GenericDialogList selectable={false} {items} on:click="onClick(event)"/>
</ModalDialog>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../../_store/store.js'
import GenericDialogList from './GenericDialogList.html'
import { setAccountFollowed } from '../../../_actions/follow.js'
import { doDeleteStatus } from '../../../_actions/delete.js'
import { show } from '../helpers/showDialog.js'
import { close } from '../helpers/closeDialog.js'
import { oncreate } from '../helpers/onCreateDialog.js'
import { setAccountBlocked } from '../../../_actions/block.js'
import { setStatusPinnedOrUnpinned } from '../../../_actions/pin.js'
import { setStatusBookmarkedOrUnbookmarked } from '../../../_actions/bookmark.js'
import { setConversationMuted } from '../../../_actions/muteConversation.js'
import { copyText } from '../../../_actions/copyText.js'
import { deleteAndRedraft } from '../../../_actions/deleteAndRedraft.js'
import { shareStatus } from '../../../_actions/share.js'
import { toggleMute } from '../../../_actions/toggleMute.js'
import { reportStatusOrAccount } from '../../../_actions/report.js'
import { formatIntl } from '../../../_utils/formatIntl.js'
import { setAccountNotified } from '../../../_actions/setAccountNotified.js'

export default {
  oncreate,
  data: () => ({
    supportsWebShare: process.browser && typeof navigator.share === 'function'
  }),
  computed: {
    relationship: ({ $currentAccountRelationship }) => $currentAccountRelationship,
    account: ({ $currentAccountProfile }) => $currentAccountProfile,
    verifyCredentials: ({ $currentVerifyCredentials }) => $currentVerifyCredentials,
    statusId: ({ status }) => status.id,
    pinned: ({ statusId, $currentStatusModifications, status }) => {
      if ($currentStatusModifications && statusId in $currentStatusModifications.pins) {
        return $currentStatusModifications.pins[statusId]
      }
      return status.pinned
    },
    //
    // begin copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
    //
    verifyCredentialsId: ({ verifyCredentials }) => verifyCredentials.id,
    following: ({ relationship }) => relationship && relationship.following,
    followRequested: ({ relationship }) => relationship && relationship.requested,
    accountId: ({ account }) => account && account.id,
    username: ({ account }) => account.username,
    muting: ({ relationship }) => relationship.muting,
    blocking: ({ relationship }) => relationship.blocking,
    notifying: ({ relationship }) => relationship && relationship.notifying,
    followLabel: ({ following, followRequested, account, username }) => {
      if (typeof following === 'undefined' || !account) {
        return ''
      }
      return (following || followRequested)
        ? formatIntl('intl.unfollowAccount', { account: `@${username}` })
        : formatIntl('intl.followAccount', { account: `@${username}` })
    },
    followIcon: ({ following, followRequested }) => (
      following ? '#fa-user-times' : followRequested ? '#fa-hourglass' : '#fa-user-plus'
    ),
    blockLabel: ({ blocking, username }) => (
      blocking
        ? formatIntl('intl.unblockAccount', { account: `@${username}` })
        : formatIntl('intl.blockAccount', { account: `@${username}` })
    ),
    blockIcon: ({ blocking }) => blocking ? '#fa-unlock' : '#fa-ban',
    muteLabel: ({ muting, username }) => (
      muting
        ? formatIntl('intl.unmuteAccount', { account: `@${username}` })
        : formatIntl('intl.muteAccount', { account: `@${username}` })
    ),
    muteIcon: ({ muting }) => muting ? '#fa-volume-up' : '#fa-volume-off',
    isUser: ({ accountId, verifyCredentialsId }) => accountId === verifyCredentialsId,
    //
    // end copypasta (StatusOptionsDialog.html / AccountProfileOptionsDialog.html)
    //
    pinLabel: ({ pinned, isUser }) => isUser ? (pinned ? 'intl.unpinFromProfile' : 'intl.pinToProfile') : '',
    visibility: ({ status }) => status.visibility,
    mentions: ({ status }) => status.mentions || [],
    mentionsUser: ({ mentions, verifyCredentialsId }) => !!mentions.find(_ => _.id === verifyCredentialsId),
    mutingConversation: ({ status }) => !!status.muted,
    muteConversationLabel: ({ mutingConversation }) => (
      mutingConversation
        ? 'intl.unmuteConversation'
        : 'intl.muteConversation'
    ),
    muteConversationIcon: ({ mutingConversation }) => mutingConversation ? '#fa-volume-up' : '#fa-volume-off',
    isPublicOrUnlisted: ({ visibility }) => visibility === 'public' || visibility === 'unlisted',
    bookmarkLabel: ({ status }) => status.bookmarked ? 'intl.unbookmarkStatus' : 'intl.bookmarkStatus',
    items: ({
      blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
      following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation,
      muteConversationLabel, muteConversationIcon, supportsWebShare, isPublicOrUnlisted, bookmarkLabel,
      username, notifying
    }) => ([
      isUser && {
        key: 'delete',
        label: 'intl.delete',
        icon: '#fa-trash'
      },
      isPublicOrUnlisted && isUser && {
        key: 'pin',
        label: pinLabel,
        icon: '#fa-thumb-tack'
      },
      !isUser && !blocking && {
        key: 'follow',
        label: followLabel,
        icon: followIcon
      },
      !isUser && following && notifying === false && { // notifying could be undefined for old servers
        key: 'notify',
        label: formatIntl('intl.notify', { account: `@${username}` }),
        icon: '#fa-bell'
      },
      !isUser && following && notifying === true && { // notifying could be undefined for old servers
        key: 'denotify',
        label: formatIntl('intl.denotify', { account: `@${username}` }),
        icon: '#fa-bell-o'
      },
      !isUser && {
        key: 'block',
        label: blockLabel,
        icon: blockIcon
      },
      !isUser && !blocking && {
        key: 'mute',
        label: muteLabel,
        icon: muteIcon
      },
      (isUser || mentionsUser) && {
        key: 'muteConversation',
        label: muteConversationLabel,
        icon: muteConversationIcon
      },
      isUser && {
        key: 'redraft',
        label: 'intl.deleteAndRedraft',
        icon: '#fa-pencil'
      },
      !isUser && {
        key: 'report',
        label: 'intl.reportStatus',
        icon: '#fa-flag'
      },
      {
        key: 'bookmark',
        label: bookmarkLabel,
        icon: '#fa-bookmark'
      },
      isPublicOrUnlisted && supportsWebShare && {
        key: 'share',
        label: 'intl.shareStatus',
        icon: '#fa-share-square-o'
      },
      isPublicOrUnlisted && {
        key: 'copy',
        label: 'intl.copyLinkToStatus',
        icon: '#fa-link'
      }
    ].filter(Boolean))
  },
  components: {
    ModalDialog,
    GenericDialogList
  },
  store: () => store,
  methods: {
    show,
    close,
    onClick (item) {
      switch (item.key) {
        case 'delete':
          return this.onDeleteClicked()
        case 'pin':
          return this.onPinClicked()
        case 'follow':
          return this.onFollowClicked()
        case 'block':
          return this.onBlockClicked()
        case 'mute':
          return this.onMuteClicked()
        case 'copy':
          return this.onCopyClicked()
        case 'muteConversation':
          return this.onMuteConversationClicked()
        case 'redraft':
          return this.onRedraft()
        case 'share':
          return this.onShare()
        case 'report':
          return this.onReport()
        case 'bookmark':
          return this.onBookmark()
        case 'notify':
          return this.onNotifyClicked()
        case 'denotify':
          return this.onDenotifyClicked()
      }
    },
    async onDeleteClicked () {
      const { statusId } = this.get()
      this.close()
      await doDeleteStatus(statusId)
    },
    async onPinClicked () {
      const { statusId, pinned } = this.get()
      this.close()
      await setStatusPinnedOrUnpinned(statusId, !pinned, true)
    },
    async onFollowClicked () {
      const { accountId, following } = this.get()
      this.close()
      await setAccountFollowed(accountId, !following, true)
    },
    async onBlockClicked () {
      const { accountId, blocking } = this.get()
      this.close()
      await setAccountBlocked(accountId, !blocking, true)
    },
    async onMuteClicked () {
      const { account, muting } = this.get()
      this.close()
      await toggleMute(account, !muting)
    },
    async onMuteConversationClicked () {
      const { statusId, mutingConversation } = this.get()
      this.close()
      await setConversationMuted(statusId, !mutingConversation, true)
    },
    async onCopyClicked () {
      const { status } = this.get()
      const { url } = status
      this.close()
      await copyText(url)
    },
    async onRedraft () {
      const { status } = this.get()
      this.close()
      await deleteAndRedraft(status)
    },
    async onShare () {
      const { status } = this.get()
      this.close()
      await shareStatus(status)
    },
    async onReport () {
      const { status, account } = this.get()
      this.close()
      await reportStatusOrAccount(({ status, account }))
    },
    async onBookmark () {
      const { status } = this.get()
      this.close()
      await setStatusBookmarkedOrUnbookmarked(status.id, !status.bookmarked)
    },
    async onNotifyClicked () {
      const { accountId } = this.get()
      this.close()
      await setAccountNotified(accountId, /* notify */ true, /* toastOnSuccess */ true)
    },
    async onDenotifyClicked () {
      const { accountId } = this.get()
      this.close()
      await setAccountNotified(accountId, /* notify */ false, /* toastOnSuccess */ true)
    }
  }
}
</script>
